<!--
 * @Author: mingyong.g
 * @Date: 2020-06-14 08:42:09
 * @LastEditors: mingyong.g
 * @LastEditTime: 2020-06-14 20:58:06
 * @Description: 异常页面
 * @FilePath: \my_ui\src\my-ui-components\my-abnor-page.vue
--> 

<template>
	<view class="content" >
		
		<view class="animation-box">
			<!-- #ifdef H5 -->
				<lottie 
					:options="options" 
					:height="size" 
					:width="size" 
				/>
			<!-- #endif -->
			<!-- #ifndef H5 -->
				<canvas 
					id="canvas"
					canvas-id="canvas"
					type="2d"
					:style="{height:size+'px',width:size*2+'px'}">
				</canvas>
			<!-- #endif -->
			<view class="tip">{{tip}}</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	  /**  
   * 空页，异常页面组件  
   * @description 空页，异常页面组件  
   * @tutorial http://www.baidu.com  
   * @property {String} color= [primary|plain|gray] 动画颜色 
   * @property {String} type = [loading|message|empty|404|search|rocket|ok|auth] 动画样式 
	 * @property {String} tip 提示文字
	 * @property {Number} size 动画尺寸
   * @example <my-abnor-page color="primary" type="rocket" :size="100" >此处可以使用插槽</my-abnor-page>
   */  
	// #ifdef MP-WEIXIN
		import lottie_mp from 'lottie-miniprogram';
	// #endif
	
	// #ifdef H5
		import lottie from 'vue-lottie';
	// #endif
	export default {
    name:"myAbnorPage",
		components:{
			// #ifdef H5
				lottie
			// #endif
		},
		data() {
			return {
        options: { 
          animationData:require(`./animation/my-${this.color}-${this.type}.json`)
        },
			}
		},
		props:{
			type:{
				type:String,
				default:"loading"
			},
			color:{
				type:String,
				default:"plain"
			},
			size:{
				type:Number,
				default:120
			},
			tip:{
				type:String,
				default:"啥也没有"
			},
		},
		mounted() {
			// #ifdef MP-WEIXIN
				this.play();
			// #endif
			
		},
		methods:{
			play() {
				// #ifdef MP-WEIXIN
					uni.createSelectorQuery().in(this).select('#canvas').node(res => {
						const canvas = res.node;
						const context = canvas.getContext('2d');
						lottie_mp.setup(canvas)//要执行动画，必须调用setup,传入canvas对象
						
						lottie_mp.loadAnimation({
							loop: true,//是否循环播放（选填）
							autoplay: true,//是否自动播放（选填）
							animationData:this.options.animationData,
							rendererSettings:{
								context//es6语法：等同于context:context（必填）
							}       
						})
					}).exec()
				// #endif	
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #efefef;
	}
	.content{
		width: 100vw;
		height: 80vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.animation-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.tip{
				font-size: 15px;
				color: #999;
				margin: 10upx;
				margin-bottom: 30upx;
			}
		}
	}
	
</style>